<template>
  <div style="margin: 1vh 0;text-align: left;padding-left: 1vw;">
    <el-button type="primary" @click="showRegister">
      注册新用户
    </el-button>
  </div>
  <div class="manage-box">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" width="80" align="center"/>
      <el-table-column prop="name" label="用户名" align="center" width="180" />

      <el-table-column label="电话" align="center" width="180" >
        <template #default="{row}">
          {{row.phone ? row.phone : '-'}}
        </template>
      </el-table-column>
      <el-table-column label="部门" align="center" width="180">
        <template #default="{row}">
          <el-tag v-if="row.department === '1'">
            部门1
          </el-tag>
          <el-tag v-else-if="row.department === '2'">
            部门2
          </el-tag>
          <el-tag v-else-if="row.department === '3'">
            部门3
          </el-tag>
          <el-tag v-else>
            部门4
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="权限" align="center" width="180">
        <template #default="{row}">
          <el-tag v-if="row.permissions === '0'" type="danger">
            超级管理员
          </el-tag>
          <el-tag v-else-if="row.permissions === '1'" type="success">
            管理员
          </el-tag>
          <el-tag v-else>
            普通用户
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="操作" label="操作" align="center">
        <template #default="{row}">
          <el-button @click="showEditRoot(row)">
            修改权限
          </el-button>
          <el-button @click="removeUser(row.name)">
            删除用户
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog
      v-model="isEditShow"
      title="修改权限"
      width="500"
      :close-on-click-modal="false"
      :before-close="cancelRoot"
  >
    <el-form :model="rootForm" label-width="auto" style="max-width: 600px">
      <el-form-item label="新权限">
        <el-select v-model="rootForm.newP">
          <el-option
              v-for="item in editList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitRoot">确认</el-button>
        <el-button @click="cancelRoot">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-dialog
      v-model="isRegisterShow"
      title="修改权限"
      width="500"
      :close-on-click-modal="false"
      :before-close="cancelRegister"
  >
    <el-form :model="registerForm" label-width="auto" style="max-width: 600px">
      <el-form-item label="用户名*">
        <el-input v-model="registerForm.name" />
      </el-form-item>
      <el-form-item label="密码*">
        <el-input v-model="registerForm.password" type="password"/>
      </el-form-item>
      <el-form-item label="确认密码*">
        <el-input v-model="registerForm.rePassword" type="password"/>
      </el-form-item>
      <el-form-item label="权限*">
        <el-input v-model="registerForm.permissions" />
      </el-form-item>
      <el-form-item label="部门">
        <el-input v-model="registerForm.department" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="registerForm.phone" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitRegister">确认</el-button>
        <el-button @click="cancelRegister">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {ElButton, ElDialog, ElTable, ElTableColumn} from "element-plus"
import {createMSG, getLocalStorage} from "@/utils/common/common"
import {onMounted, reactive, ref} from "vue"
import {delUser, editRoot, getAllUsers, register} from "@/api/User"

let userInfo = null
const isEditShow = ref(false)
const isDelShow = ref(false)
const isRegisterShow = ref(false)
const editList = ref([
  {
    label:'超级管理员',
    value:'0'
  },{
    label:'管理员',
    value:'1'
  },{
    label:'普通用户',
    value:'2'
  },
])

const tableData = ref()
const rootForm = reactive({
  newP:''
})
let registerForm = reactive({
  name:'',
  password:'',
  rePassword:'',
  permissions:'',
  department:'',
  phone:''
})
let currentRow = null


onMounted(()=>{
  userInfo = getLocalStorage()
  getUserList()
})


const getUserList = async () => {
  try {
    const {data:res} = await getAllUsers()
    if (res.code === 200){
      tableData.value = res.data
      console.log(res)
    } else {
      return createMSG('未获取到用户列表','info',true)
    }
  } catch (e) {
    console.log(e)
  }
}

const showEditRoot = (row) => {
  currentRow = row
  isEditShow.value = true
}

const submitRoot = async () => {
  try {
    if (!rootForm.newP) return createMSG('权限不可为空','warning')
    const {data:res} = await editRoot({
      name:userInfo.name,
      permissions:rootForm.newP
    })
    if (res.code === 200){
      createMSG('操作成功','success',true)
      await cancelRoot()
      await getUserList()
    } else {
      createMSG('操作失败','error',true)
      await cancelRoot()
      await getUserList()
    }
  } catch (e) {
    console.log(e)
  }
}

const cancelRoot = () => {
  isEditShow.value = false
  rootForm.newP = ''
  currentRow = null
}

const removeUser = async (row) => {
  try {
    const res = window.confirm('此操作不能撤销,确认删除?')
    if (res){
      const {data:res} = await delUser({
        name:row
      })
      if (res.code === 200){
        await getUserList()
        createMSG('操作成功','success',true)
      } else if (res.code === 201){
        await getUserList()
        createMSG('该用户不存在','info',true)
      } else {
        createMSG('操作失败','error',true)
        await getUserList()
      }
    }
  } catch (e) {
    console.log(e)
  }
}

const showRegister = () => {
  isRegisterShow.value = true
}

const submitRegister = async () => {
  try {
    if (!registerForm.name ||!registerForm.password ||!registerForm.rePassword || !registerForm.permissions) return createMSG('用户名、密码、确认密码及初始权限不能为空!','warning',false)
    if (registerForm.password !== registerForm.rePassword) return createMSG('两次密码输入不一致','warning',false)
    const {data:res} = await register({
      name:registerForm.name,
      password:registerForm.password,
      rePassword:registerForm.rePassword,
      permissions:registerForm.permissions,
      department:registerForm.department ? registerForm.department : null,
      phone:registerForm.phone ? registerForm.phone : null,
    })
    if (res.code === 200){
      createMSG('创建成功!','success',true)
      await cancelRegister()
      await getUserList()
    } else {
      createMSG('创建失败','info',true)
      await cancelRegister()
      await getUserList()
    }
  } catch (e) {
    console.log(e)
  }
}

const cancelRegister = () => {
  isRegisterShow.value = false
  registerForm = {
    name:'',
    password:'',
    rePassword:'',
    permissions:'',
    department:'',
    phone:''
  }
}
</script>

<style scoped lang="less">

</style>
